<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>官网图片上传 </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/css/style.css">
  <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
  <script type="text/javascript" src="__PUBLIC__/plugin/layer/layer.js"></script>

  <!--引入CSS-->
  <link rel="stylesheet" type="text/css" href="/Public/plugin/WebUploader/dist/webuploader.css" />
  <link rel="stylesheet" type="text/css" href="/Public/plugin/WebUploader/theme/css/style.css" />

  <style type="text/css">
  	ul,li{ list-style: none; margin: 0; padding:0;}
  	img{ border: 0; vertical-align: middle;}
    .clearfx:before,
    .clearfx:after {content: " ";display: table;}
    .clearfx:after { clear: both;}
  	.proimgbox{display: block;width:720px;height:300px; position: relative;top: 0;left: 0; padding: 10px; font-family: 'Microsoft YaHei','STHeiti','SimHei';box-sizing:border-box; margin: 0 auto;}
  	.proimgbox .tabsbox{ display: block;width: 100%; height: 28px;box-sizing:border-box;}
  	.proimgbox .tabsbox a{display: block;float: left;height:28px; padding: 0 15px;margin-right: 2px;background:#fff;font-size: 14px;color: #535353;text-decoration: none;line-height:28px;}
  	.proimgbox .tabsbox a:hover,.proimgbox .tabsbox a.active{background: #80b4ee;color: #fff;}
  	.proimglistbox{width:100%; min-height: 230px;padding-top: 15px;box-sizing:border-box; }
  	.proimglistbox .imglist{ width: 100%; max-height: 225px; box-sizing:border-box; overflow:auto;}
  	.proimglistbox .imglist li{display: block;float: left;width: 150px;height: 100px;margin: 5px;border: 2px #eee solid;background: #fff;overflow: hidden;}
  	.fileloadbox{display: block;position:absolute; top:50%; left:50%; width: 150px;height: 100px;margin-left:-75px; margin-top:-50px;text-align: center;}
  	.fileloadbox .fileimgload{display: block;position: absolute;left: 0;top: 0;width:150px; height:100px; border:1px #d3d3d3 solid;background:url(/Public/image/add01.png) no-repeat 50% 26px; overflow: hidden;cursor: pointer;}
  	.fileloadbox .inputfile{ display:block; position: absolute;top: 0;left: 0;width:150px; height:100px;opacity:0;z-index: 9999;cursor: pointer;overflow: hidden;}
    .fileloadbox .filetxt{display:inline-block;font-size:14px; text-align:center; color:#666; margin-top:62px;}
  	.fileimgload img{ width: 150px; height: 100px;}
    .delimg{ position: absolute;top: 0;right: 0; display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;color: red;z-index: 201;}
  </style>
</head>
<body style="min-width: 530px;">
	<div class="proimgbox">
		<div class="tabsbox clearfx">
			<a href="javascript:;" class="active">上传图片</a>
			<a href="javascript:;">选择图片</a>
		</div>

		<div class="proimglistbox">
      <div id="wrapper">
        <div id="container">
            <!--头部，相册选择和格式选择-->

            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <!-- <p>或将照片拖到这里，单次最多可选300张</p> -->
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>

		<!--选择图片-->
    <div class="proimglistbox" style="display: none" id="selectImg">
			<ul class="imglist clearfx" >
        <foreach name="list" item="vo">
				<li style="position: relative; cursor: pointer;" onclick="curr(this)">
          <img src="http://www.tripvip.cn{$vo.webUrl}" width="150" height="100" >
          <input type="hidden" name="webImgID" value="{$vo.id}">
          <span class="delimg" onClick="delImg(this)">X</span>
        </li>
        </foreach>
			</ul>
      <div style="text-align: center;">
        <span style="display: inline-block; width: 100%; height: 30px; line-height: 30px; cursor: pointer;" onclick="clickMore('{$type}','{$sizeType}','{$countryID}')">点击加载更多</span>
      </div>
		</div>

	</div>
  <!-- Web Uploader -->
  <script type="text/javascript" src="/Public/plugin/WebUploader/dist/webuploader.js"></script>
  <script type="text/javascript">

  var sizeType = "{$sizeType}";
  var fileType = "Img";
  var type     = "{$type}";
  var cityID   = "{$cityID}";
  var corp     = 0;

  if(sizeType == 1)corp = 1;

  // WebUploader配置
  var fileNumLimit = "{$fileNumLimit}";
  var server = '/Home/Public/uploadPic?fileType='+fileType+'&type='+type+'&cityID='+cityID+'&corp='+corp;

  </script>
  <script type="text/javascript" src="/Public/plugin/WebUploader/theme/js/upload.js"></script>

  <script type="text/javascript">

    $(function () {
      $('.tabsbox a').click(function () {
        $('.tabsbox').find('a').removeClass('active');
        $(this).addClass('active');
        if($('.tabsbox a:first').attr('class').length > 0)
        {
          $('.proimglistbox:last').hide();
          $('.proimglistbox:first').show();
        }
        else
        {
          $('.proimglistbox:first').hide();
          $('.proimglistbox:last').show();
        }
      })

    })
    /**
     * [delImg description]
     * @param  {[type]} argument [description]
     * @return {[type]}          [description]
     */
    function delImg(obj) 
    { 
      var object = $(obj);
      //询问框
      var DIV = layer.confirm('确定要删除此图片？', {
          btn: ['确认','取消'] //按钮
        }, function(){
            var id = object.parent('li').find('input[name="webImgID"]').val();
            getdelImg(object,id);
            layer.close(DIV);
        }, function(){
            layer.close(DIV);
        });
    }
    /**
     * [delImg description]
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    function getdelImg(obj,id)
    {
      $.ajax({
        url: "{:U(MODULE_NAME.'/Public/delImg')}",
        type: 'POST',
        dataType: 'json',
        data: {'id': id},
        success:function (data) {
          if(data.valid == true)
          {
            $(obj).parent().remove();
            layer.msg(data.state, {icon: 1});

          }
          else
          {
            layer.msg(data.state, {icon: 2});
          }
        }
      })
    }
    /**
     * [curr description]
     * @return {[type]} [description]
     */
    function curr(obj)
    {
      $('.imglist li').css({'border':'2px #eee solid'});
      var filelengthLimit = $('.imglist li .curr').length;
      if(filelengthLimit >= fileNumLimit)
      {
        $('.imglist li .curr:first').remove();
      }

      $(obj).css('border','2px #28A4DA solid');
      $(obj).append('<div style="display: block; position: absolute;left: 0; bottom: 0; height: 40px;width: 100%; z-index: 200;background: url(/Public/plugin/WebUploader/theme/img/success.png) no-repeat right bottom;" class="curr"></div>');
    }


    /**
     * [clickMore description]
     * @param  {[type]} type      [description]
     * @param  {[type]} sizeType  [description]
     * @param  {[type]} countryID [description]
     * @return {[type]}           [description]
     */
    function clickMore(type,sizeType,countryID)
    {
      var lenth = $('#selectImg').find('li').length;
      $.ajax({
        url: "{:U(MODULE_NAME.'/Public/getLocalImages')}",
        type: 'post',
        dataType: 'json',
        data: {'type': type,'sizeType': sizeType,'countryID': countryID,'lenth': lenth},
        success:function (data) {
          if(data.valid == true)
          {
            var html = '';
            for (var i = 0; i < data.info.webUrlArr.length; i++)
            {
              html+='<li style="position: relative; cursor: pointer;" onclick="curr(this)">';
                html+='<img src="http://www.tripvip.cn'+data.info.webUrlArr[i].webUrl+'" width="150" height="100" >';
                html+='<input type="hidden" name="webImgID" value="'+data.info.webUrlArr[i].id+'">';
                html+='<span class="delimg" onClick="delImg(this)">X</span>';
              html+='</li>';
            }
            $('#selectImg ul').append(html);
          }
          else
          {
            layer.msg(data.state) ;
          }
        }
      })
    }
  </script>
</body>
</html>